<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城报栈 - 微信小程序高保真原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义样式 */
        .prototype-frame {
            width: 393px;
            height: 852px;
            border: 1px solid #e5e7eb;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .prototype-frame:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
            gap: 2rem;
            justify-items: center;
        }
        
        @media (max-width: 1400px) {
            .grid-container {
                grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            }
        }
        
        @media (max-width: 900px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
        
        .page-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 头部区域 -->
    <header class="gradient-bg text-white py-12">
        <div class="container mx-auto px-6">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">城报栈</h1>
                <p class="text-xl md:text-2xl mb-2 opacity-90">本地便民信息聚合平台</p>
                <p class="text-lg opacity-80">微信小程序高保真原型展示</p>
            </div>
            
            <!-- 项目信息卡片 -->
            <div class="mt-12 max-w-4xl mx-auto">
                <div class="grid md:grid-cols-3 gap-6">
                    <div class="feature-card rounded-xl p-6 text-center">
                        <div class="text-3xl font-bold mb-2">4</div>
                        <div class="text-sm opacity-90">核心板块</div>
                        <div class="text-xs opacity-75 mt-1">社区·市场·朋友·明星</div>
                    </div>
                    <div class="feature-card rounded-xl p-6 text-center">
                        <div class="text-3xl font-bold mb-2">免费</div>
                        <div class="text-sm opacity-90">使用模式</div>
                        <div class="text-xs opacity-75 mt-1">免费+板块+社区成团</div>
                    </div>
                    <div class="feature-card rounded-xl p-6 text-center">
                        <div class="text-3xl font-bold mb-2">本地</div>
                        <div class="text-sm opacity-90">服务范围</div>
                        <div class="text-xs opacity-75 mt-1">定位+实名+评价体系</div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 原型展示区域 -->
    <main class="container mx-auto px-6 py-12">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-800 mb-4">原型页面预览</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                以下是城报栈微信小程序的核心功能页面，采用温馨社区风格设计，
                注重用户体验和信息的快速获取。每个页面都严格遵循微信小程序设计规范。
            </p>
        </div>
        
        <!-- 页面网格 -->
        <div class="grid-container">
            <!-- 首页 -->
            <div class="page-item">
                <div class="prototype-frame">
                    <iframe src="./home.html" 
                            width="393" 
                            height="852" 
                            frameborder="0" 
                            scrolling="no">
                    </iframe>
                </div>
                <div class="mt-4 text-center">
                    <h3 class="text-lg font-semibold text-gray-800">首页</h3>
                    <p class="text-sm text-gray-600">四大板块入口 + 热门推荐</p>
                </div>
            </div>
            
            <!-- 社区页面 -->
            <div class="page-item">
                <div class="prototype-frame">
                    <iframe src="./community.html" 
                            width="393" 
                            height="852" 
                            frameborder="0" 
                            scrolling="no">
                    </iframe>
                </div>
                <div class="mt-4 text-center">
                    <h3 class="text-lg font-semibold text-gray-800">社区板块</h3>
                    <p class="text-sm text-gray-600">本地便民信息聚合</p>
                </div>
            </div>
            
            <!-- 市场页面 -->
            <div class="page-item">
                <div class="prototype-frame">
                    <iframe src="./market.html" 
                            width="393" 
                            height="852" 
                            frameborder="0" 
                            scrolling="no">
                    </iframe>
                </div>
                <div class="mt-4 text-center">
                    <h3 class="text-lg font-semibold text-gray-800">市场板块</h3>
                    <p class="text-sm text-gray-600">商家活动 + 社区团购</p>
                </div>
            </div>
            
            <!-- 朋友页面 -->
            <div class="page-item">
                <div class="prototype-frame">
                    <iframe src="./friends.html" 
                            width="393" 
                            height="852" 
                            frameborder="0" 
                            scrolling="no">
                    </iframe>
                </div>
                <div class="mt-4 text-center">
                    <h3 class="text-lg font-semibold text-gray-800">朋友板块</h3>
                    <p class="text-sm text-gray-600">邻里互助 + 社交功能</p>
                </div>
            </div>
            
            <!-- 明星页面 -->
            <div class="page-item">
                <div class="prototype-frame">
                    <iframe src="./stars.html" 
                            width="393" 
                            height="852" 
                            frameborder="0" 
                            scrolling="no">
                    </iframe>
                </div>
                <div class="mt-4 text-center">
                    <h3 class="text-lg font-semibold text-gray-800">明星板块</h3>
                    <p class="text-sm text-gray-600">优质服务推荐</p>
                </div>
            </div>
            
            <!-- 个人中心页面 -->
            <div class="page-item">
                <div class="prototype-frame">
                    <iframe src="./profile.html" 
                            width="393" 
                            height="852" 
                            frameborder="0" 
                            scrolling="no">
                    </iframe>
                </div>
                <div class="mt-4 text-center">
                    <h3 class="text-lg font-semibold text-gray-800">个人中心</h3>
                    <p class="text-sm text-gray-600">用户信息 + 设置管理</p>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 设计说明区域 -->
    <section class="bg-white py-12">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">设计说明</h2>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <!-- 产品定位 -->
                    <div class="bg-gray-50 rounded-xl p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4">产品定位</h3>
                        <p class="text-gray-600 leading-relaxed">
                            城报栈是一个本地化便民信息聚合平台，通过"免费+板块+社区成团"的模式，
                            为用户提供快捷入口查看海量线下资源，解决用户无法快速找到便民信息的痛点。
                        </p>
                    </div>
                    
                    <!-- 设计风格 -->
                    <div class="bg-gray-50 rounded-xl p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4">设计风格</h3>
                        <p class="text-gray-600 leading-relaxed">
                            采用温馨社区风格，以暖色调为主，营造亲切友好的邻里氛围。
                            使用圆角卡片、柔和阴影等元素，让用户感受到家的温暖。
                        </p>
                    </div>
                    
                    <!-- 核心功能 -->
                    <div class="bg-gray-50 rounded-xl p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4">核心功能</h3>
                        <ul class="text-gray-600 space-y-2">
                            <li>• <strong>社区：</strong>本地便民信息发布与查看</li>
                            <li>• <strong>市场：</strong>商家活动与社区团购</li>
                            <li>• <strong>朋友：</strong>邻里互助与社交功能</li>
                            <li>• <strong>明星：</strong>优质服务商推荐</li>
                        </ul>
                    </div>
                    
                    <!-- 技术特色 -->
                    <div class="bg-gray-50 rounded-xl p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4">技术特色</h3>
                        <ul class="text-gray-600 space-y-2">
                            <li>• <strong>实名认证：</strong>确保用户信息真实可靠</li>
                            <li>• <strong>定位服务：</strong>精准匹配本地资源</li>
                            <li>• <strong>评价体系：</strong>建立信用机制</li>
                            <li>• <strong>隐私保护：</strong>严格保护用户隐私</li>
                        </ul>
                    </div>
                </div>
                
                <!-- 色彩方案 -->
                <div class="mt-8 bg-gray-50 rounded-xl p-6">
                    <h3 class="text-xl font-semibold text-gray-800 mb-4">色彩方案</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="text-center">
                            <div class="w-16 h-16 bg-orange-500 rounded-lg mx-auto mb-2"></div>
                            <div class="text-sm text-gray-600">主色调</div>
                            <div class="text-xs text-gray-500">#FF7043</div>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 bg-yellow-100 rounded-lg mx-auto mb-2"></div>
                            <div class="text-sm text-gray-600">背景色</div>
                            <div class="text-xs text-gray-500">#FFF8E1</div>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 bg-green-500 rounded-lg mx-auto mb-2"></div>
                            <div class="text-sm text-gray-600">成功色</div>
                            <div class="text-xs text-gray-500">#4CAF50</div>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 bg-blue-500 rounded-lg mx-auto mb-2"></div>
                            <div class="text-sm text-gray-600">信息色</div>
                            <div class="text-xs text-gray-500">#2196F3</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-6 text-center">
            <p class="text-gray-400">
                © 2024 城报栈 - 微信小程序高保真原型 | 设计遵循温馨社区风格
            </p>
            <p class="text-gray-500 text-sm mt-2">
                原型尺寸：393×852px (iPhone 16 Pro) | 技术栈：HTML + Tailwind CSS
            </p>
        </div>
    </footer>
</body>
</html>